<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的地址</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=0">
    <!-- 电话号码不被显示为超链接 -->
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" href="./static/css/animate.css">
    <link rel="stylesheet" href="./static/css/com.css">
    <link rel="stylesheet" href="./static/css/my-shopping-car.css">
</head>

<body>
    <div id='app'>

        <hea-controll :icon_json='heaIconJson' @right2='right2'></hea-controll>

        <!-- 顶部说明 -->
        <div class='car-fixed' v-if='havaCar'>
            <div class='car-flex-wrap car-title'>
                <div>商品</div>
                <div>单价</div>
                <div>数量</div>
                <div>总价</div>
            </div>
        </div>
        <!-- 顶部说明 -->

        <!-- 购物车列表  包含有空购物车图标提示-->
        <div class='car-all-wrap'>

            <div class='car-is-null' v-if='!havaCar'>
                <img src="./static/img/car-null.png" width="140px" height="140px">
                <p>购物车竟然是空的</p>
                <button>去逛逛花迦</button>
            </div>

            <div v-if='havaCar' class="car-list car-flex-wrap" v-for='(val,index) in 12' :key='index'>
                <div class='goods-img-name'>
                    <input type="checkbox" :id="'cbtest'+index" />
                    <label @click='changeOneGoods(val,$event)' off='0' ref='changeGoods' :for="'cbtest'+index" class="check-box check-box-goods"></label>
                    <img src="./static/img/download-logo.png" width="80px" height="80px">
                    <span>sdklj十多年尽快立法上的是大家看法流口水的份</span>
                </div>
                <div><input type="text" value="￥123.00" readonly></div>
                <div><span @click='carDes($event)' class='animated car-count-controll' style="margin-right:6px;">-</span><span>3</span><span @click='carAdd($event)' class='animated car-count-controll' style="margin-left:6px;">+</span></div>
                <div><input type="text" value='￥12345454545.00' readonly></div>
            </div>

            <!-- 底部推荐商品 -->
            <index-goods-title :font='goodsTitle'></index-goods-title>
            <goods-info :goods_info='goodsInfo'></goods-info>
            <!-- 底部推荐商品 -->

        </div>
        <!-- 购物车列表 -->

        <!-- 删除购物车商品 -->
        <div class='del-goods-wrap animated' ref='delEl' v-if='havaCar' @click='delGoods'>
            删
        </div>
        <!-- 删除购物车商品 -->

        <!-- 底部控制 -->
        <div class='car-bottom-controll'>
            <div class='bottom-left'>
                <input style="display:none;" type="checkbox" id="cbtest" />
                <label @click='allChange' for='cbtest' class="check-box"></label>
                <span @click='allChange'>全选</span>
            </div>
            <div class='bottom-right'>
                <span>全部商品<span>1</span>件，</span>
                <span>总计：￥<span>1200.00</span></span>
                <button @click='pay'>结算</button>
            </div>
        </div>
        <!-- 底部控制 -->

    </div>
    <script src="./static/js/com.js"></script>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src='./static/js/vue.min.js'></script>
    <script src="./component/com/header.js"></script>
    <script src="./component/com/goodsInfo.js"></script>
    <script src="./component/com/goodsTitle.js"></script>
    <script src="./static/js/vue-service-car.js"></script>
</body>

</html>